<template>
	<view class="c_container">
		<view class="c_header">
			<view class="qh_box" v-if="idCard">
				<view class="q_box">
					<text class="b_name">姓名：</text>
					<text class="b_name_txt">{{realName}}</text>
				</view>
				<view class="q_box">
					<text class="b_name">身份证：</text>
					<text class="b_name_txt">{{idCard}}</text>
				</view>
			</view>
		</view>
		<view class="in_boxs">
			<view class="list_b">
				<text class="lisi" @click="lishiCZ">查看充值历史</text>
			</view>
			<view class="input_box">
				<view class="in_box">
					<text class="orgTxt">请选择<text></text></text>
					<view style="display: flex;flex: 1;flex-direction: row;justify-content: space-around;align-items: center;">
						<!-- <picker class="selectBox" mode="selector" range-key="cityName" :value="shengIndex" :range="shengList" @change="bindshengSelectChange"> -->
							<view class="selectBox selectTxt">{{defaultShengName}}</view>
						<!-- </picker> -->
						<picker class="selectBox" mode="selector" range-key="cityName" :value="shiIndex" :range="shiList" @change="bindshiSelectChange">
							<view class="selectTxt">{{defaultShiName}}<image class="down_icon" src="/static/images/down.png" mode="scaleToFill"></image></view>
						</picker>
						<picker class="selectBox" mode="selector" range-key="cityName" :value="xianIndex" :range="xainList" @change="bindxianSelectChange">
							<view class="selectTxt">{{defaultXianName}}<image class="down_icon" src="/static/images/down.png" mode="scaleToFill"></image></view>
						</picker>
					</view>
				</view>
				<view class="in_box" @click="showOrg = true">
					<text class="orgTxt">机构<text></text></text>
					<input style="flex: 1;" v-model="orgName" :disabled="true" type="text" placeholder-class="account-txt" class="uni-input" placeholder="请输入机构名称" />
				</view>
				<!-- <view v-if="isValue" class="list_box" :style="{height: schCount > 10 ? '480rpx': 'auto', overflow: schCount > 10 ? 'scroll' : ''}">
					<view @click.stop="cliName(item)" v-for="(item, ind) in sList" :key="ind">
						<text style="font-size: 26rpx;">{{item.orgName}}</text>
					</view>
					<text class="tishiTxt" v-if="schCount == 0">{{schErrTxt}}</text>
					<view style="display: flex;flex-direction: row;">
						<text @click="toCancel" class="tishiTxt more" v-if="schCount > 10">关闭</text>
					</view>
				</view> -->
				<view class="in_box">
					<text class="orgTxt">卡号<text></text></text>
					<input type="text" style="flex: 1;" v-model="cardNo" @blur="carNoLen" placeholder-class="account-txt" class="uni-input" placeholder="请输入个人卡号(校园卡/机关饭卡等)" />
				</view>
				<view class="in_box">
					<text class="orgTxt">类型<text></text></text>
					<picker style="width: 88%;position: relative;" mode="selector" :value="jobIndex" :range="jobList" @change="bindjobListSelectChange">
						<view class="uni-input account-txt">{{getjobListName(jobIndex)}}</view>
					</picker>
					<image src="/static/images/down.png" style="position: absolute; right: 10rpx; width: 56rpx; height: 56rpx;"></image>
				</view>
			</view>
		</view>
		<view class="boxsss" v-if="showBox">
			<view class="modal_boxs">
				<view class="lisi_top">
					<text class="modal_box">卡充值记录</text>
				</view>
				<view style="width: 90%;">
					<view class="box_head">
						<text class="txt_layout">机构</text>
						<text class="txt_layout">卡号</text>
						<text class="txt_layout">快速充值</text>
					</view>
					<view class="box_body" v-for="(item, ind) in stuList" v-if="stuList.length != 0" :key="ind">
						<text class="txt_layout" style="font-size: 24rpx;">{{item.orgName}}</text>
						<text class="txt_layout" style="font-size: 24rpx;">{{item.cardNo}}</text>
						<view class="txt_layout">
							<text class="toPay" @click="toCZ(item)">去充值</text>
						</view>
					</view>
					<view v-if="stuList.length == 0" class="less_txt">
						<text class="scroll_title">暂无历史记录</text>
					</view>
				</view>
				<view class="quexiao">
					<button type="primary" class="lisis" style="background-color: #477EDA;" @click="cancelFlag">关闭</button>
				</view>
			</view>
		</view>
		<view class="btns">
			<button type="primary" class="btn_pri" style="background-color: #477EDA;" @click="queren">确认</button>
		</view>
		<popup-org title="选择机构" v-model="showOrg" :parentId="parentId" @change="cliName"></popup-org>
		<tmcModal :isShow="showMcModal1" :showCancel="false" :content="content1" :title="title1" @cancel="cancel" @ok='queren'></tmcModal>
	</view>
</template>

<script>
	import {imgURL} from '../../common/utils/config.js'
	import {findEmpCard,queryOrg,getRechargeEmp,getAccessToken,getHistoryRecharge, findBaseArea} from '../../common/api/index.js'
	import {_showLoading, _showToast} from '../../common/js/util.js'
	import popupOrg from '../../components/custom-popup-org/custom-popup-org.vue'
	import tmcModal from '../../components/custom-modal/mc-modal.vue'
	export default {
		onLoad: function (option) { //option为object类型，会序列化上个页面传递的参数
			// this.walletObj = {...JSON.parse(decodeURIComponent(option.objParams))}
			// this.stuObj = {...JSON.parse(decodeURIComponent(option.stuObj))}
		},
		components: {
			popupOrg,
			tmcModal
		},
		computed: {
			getjobListName(index) {
				return function(index) {
					return this.jobList[index]
				}
			},
			sList() {
				if(this.schCount == 0 && !this.isMore) {
					return this.schoolList = []
				}
				if(this.schCount <= 10 && !this.isMore) {
					return this.schoolList
				}
				if(this.schCount > 10 && !this.isMore) {
					return this.schoolList
				}
				if(this.schCount > 10 && this.isMore) {
					return this.schoolList
				}
			}
		},
		watch: {
			selectName(newVal, oldVal) {
				if(newVal.length >= 4) {
					return;
				} else {
					this.onInput(newVal)
				}
			}
		},
		onShow:function(){
			this._shiList()
		},
		data() {
			return {
				imgUrls: `${imgURL}/mini_image_file/`,
				jobIndex: 0,
				jobName: '',
				isValue: false,
				showBox: false,
				cardNo: '',
				orgId: '',
				orgName: '',
				schSuccTxt: '',
				counLen: 0,
				isMore: false,
				stuList: [],
				realName: uni.getStorageSync('realname'),
				idCard: uni.getStorageSync('idCard'),
				jobList: ['请选择充值类型', '食堂钱包'],
				defaultShengName: '广西',
				defaultShiName: '市',
				defaultXianName: '县/区',
				shengIndex: 0,
				shiIndex: 0,
				xianIndex: 0,
				shengList: [],
				shiList: [],
				xainList: [],
				parentId: '',
				showOrg: false,
				content1: '',
				title1: '',
				showMcModal1: false
			}
		},
		methods: {
			showTxt(title, content) {
				this.title1 = title
				this.content1 = content
				this.showMcModal1 = true
			},
			cancel() {
				this.showMcModal1 = false
			},
			queren() {
				this.showMcModal1 = false
			},
			_shiList() {
				findBaseArea({
					type: 2,
					parentId: 45
				}).then(res => {
					if(res.code == 0) {
						this.shiList = res.data
					} else {
						// this.showTxt('温馨提示', res.resultMsg)
						uni.showToast({
							icon: "none",
							title: "省市县数据获取失败：" + res.resultMsg || res.msg,
							duration: 2000
						})
					}
				}).catch(err => {
					console.log(err)
				})
			},
			_zhengList() {
				findBaseArea({
					type: 3,
					parentId: this.shiList[this.shiIndex].codeId
				}).then(res => {
					if(res.code == 0) {
						this.xainList = res.data
						_showToast('请选择区~')
					} else {
						this.showTxt('温馨提示', res.msg)
					}
				}).catch(err => {
					console.log(err)
				})
			},
			bindshengSelectChange: function(e) {
				this.shengIndex = e.target.value
				this.defaultShengName = this.shengList[this.shengIndex].cityName
				this._shiList()
			},
			bindshiSelectChange: function(e) {
				this.shiIndex = e.target.value
				this.defaultShiName = this.shiList[this.shiIndex].cityName
				this._zhengList()
				this.onInput()
				this.defaultXianName = '县/区'
			},
			bindxianSelectChange: function(e) {
				this.xianIndex = e.target.value
				this.defaultXianName = this.xainList[this.xianIndex].cityName
				this.onInput()
			},
			pad(num, n) {
			  var len = num.length;
			  while(len < n) {
			    num = "0" + num;
			    len++;
			  }
			  this.cardNo = num;
			  return num;
			},
			carNoLen() {
				if(this.cardNo.length == 0) {
					return
				} else if(this.cardNo.length < 8) {
					_showToast('卡号不足8位系统将自动补足')
					this.pad(this.cardNo, 8)
				}
			},
			toCZ(item) {
				this.selectName = item.orgName
				this.orgId = item.orgId
				this.cardNo = item.cardNo
				this.showBox = false
			},
			queren() {
				if(this.jobIndex == 0) {
					_showToast('请先选择充值类型')
				} else {
					findEmpCard({
						orgId: this.orgId,
						cardNo: this.cardNo,
						walletType: this.jobList[this.jobIndex] == '热水钱包' ? 3 : 1
					}).then(res => {
						if(res.code == 0) {
							uni.navigateTo({
								url: './binReshui?objParams=' + encodeURIComponent(JSON.stringify({...res.data, walletType: (this.jobList[this.jobIndex] == '热水钱包' ? 3 : 1)}))
							})
						} else {
							uni.showToast({
								title: `${res.msg}`,
								icon: 'none'
							})
						}
					}).catch(err => {
						console.log(err)
					})
				}
			},
			toCancel() {
				this.isValue = false
			},
			cliName(obj) {
				this.orgId = obj.orgId;
				this.orgName = obj.orgName;
			},
			toMore() {
				this.isMore = true
			},
			onInput(name) {
				this._getQueryOrg(name)
			},
			lishiCZ() {
				let _this = this;
				_showLoading('加载中,请稍后…')
				let openId = uni.getStorageSync('str2')
				// #ifdef MP-ALIPAY
				uni.login({
					provider: 'alipay',
					success:function(response){
						if(response.errMsg == "login:ok") {
							_showLoading('加载中,请稍后…')
							getAccessToken({
								code: response.code,
								appId: '2021001166607187'
							}).then(res => {
								if(res.code == 0) {
									getRechargeEmp({
										openId: res.data.aliUserId
									}).then(ress => {
										if(ress.code == 0) {
											_this.stuList = ress.data
											uni.hideLoading()
											_this.showBox = true
										} else {
											uni.hideLoading()
											this.showTxt('温馨提示', ress.msg)
										}
									}).catch(err => {
										console.log(err)
									})
								}
							}).catch(err => {
								console.log(err)
							})
						}
					},
					complete:function(){
						// uni.hideLoading();
					}
				})
				// #endif
				// #ifdef MP-WEIXIN
				uni.login({
					provider: 'weixin',
					success:function(response){
						if(response.errMsg == "login:ok") {
							_showLoading('加载中,请稍后…')
							getRechargeEmp({
								code: response.code
							}).then(res => {
								if(res.code == 0) {
									_this.stuList = res.data
									uni.hideLoading()
									_this.showBox = true
								} else {
									uni.hideLoading()
									this.showTxt('登录失败', res.resultMsg)
								}
							}).catch(err => {
								console.log(err)
							})
						}
					},
					complete:function(){
						uni.hideLoading();
					}
				})
				// #endif
				// #ifdef APP-PLUS
				let s_userId = uni.getStorageSync('s_userId')
				getHistoryRecharge({
					userId: s_userId
				}).then(res => {
					if(res.code == 0) {
						_this.stuList = res.data
						uni.hideLoading()
						_this.showBox = true
					} else {
						uni.hideLoading()
						this.showTxt('登录失败', res.resultMsg)
					}
				}).catch(err => {
					console.log(err)
				})
				// #endif
				// #ifdef H5
				_showLoading('加载中,请稍后…')
				getRechargeEmp({
					code: '',
					openId: openId
				}).then(res => {
					if(res.code == 0) {
						_this.stuList = res.data
						uni.hideLoading()
						_this.showBox = true
						_this.counLen = 1
					} else {
						uni.showLoading()
					}
				}).catch(err => {
					uni.showLoading()
					console.log(err);
				})
				// #endif
				
			},
			cancelFlag() {
				this.showBox = false;
			},
			_getQueryOrg(name) {
				if(this.defaultShengName == '广西' && this.defaultShiName == '市' && this.defaultXianName == '县/区') {
					this.parentId = 45
				} else {
					if(this.defaultShengName != '广西' && this.defaultShiName == '市' && this.defaultXianName == '县/区') {
						this.parentId = this.shengList[this.shengIndex].codeId
					} else if(this.defaultShiName != '市' && this.defaultXianName == '县/区') {
						this.parentId = this.shiList[this.shiIndex].codeId
					} else if(this.defaultXianName != '县/区') {
						this.parentId = this.xainList[this.xianIndex].codeId
					}
				}
			},
			bindjobListSelectChange: function(e) {
				this.jobIndex = e.target.value
				this.jobName = this.jobList[e.target.value]
			}
		}
	}
</script>

<style>
	page {
		background-color: #FFFFFF;
	}
	.c_container {
		height: 100%;
		/* background-color: #007AFF; */
	}
	.c_header {
		width: 100vw;
		height: 350rpx;
		background-image: url('');
		background-size: 100%;
		background-repeat: no-repeat;
		display: flex;
		justify-content: center;
		position: relative;
	}
	.btns {
		display: flex;
		justify-content: center;
		align-items: center;
		background-color: #FFFFFF;
		padding-top: 40rpx;
	}
	.btn_pri {
		width: 70%;
		height: 80rpx;
		text-align: center;
		line-height: 80rpx;
		font-size: 32rpx;
		font-family: "PingFangSC-Heavy, PingFang SC";
		font-weight: 600;
		color: #FFFFFF;
		background: linear-gradient(90deg, #0685FF 0%, #285EFF 100%);
		box-shadow: 0px 8px 16px 0px rgba(36, 98, 255, 0.24);
		border-radius: 8rpx;
	}
	.qh_box {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		background: linear-gradient(180deg, #F9FCFF 0%, #EDEFFF 100%);
		border-radius: 8px 8px 0px 0px;
		width: 80%;
		height: 120rpx;
		position: absolute;
		bottom: 0;
		padding: 40rpx;
	}
	.q_box {
		display: flex;
		flex-direction: row;
	}
	.b_name {
		font-size: 28rpx;
		font-family: "PingFang-SC-Medium, PingFang-SC";
		font-weight: 500;
		color: #6B707A;
	}
	.b_name_txt {
		font-size: 28rpx;
		font-family: "PingFangSC-Semibold, PingFang SC";
		font-weight: 600;
		color: #3C424F;
	}
	.scroll_title {
		font-family: 'Arial Normal', 'Arial';
		font-weight: 400;
		font-size: 28rpx;
		color: #DDDDDD;
		text-align: center;
	}
	.lisi {
		float: right;
		background: #FFFFFF;
		border-radius: 26rpx;
		border: 1px solid #185AFF;
		font-size: 28rpx;
		font-family: "PingFang-SC-Medium, PingFang-SC";
		font-weight: 500;
		color: #185AFF;
		padding: 8rpx 26rpx;
	}
	.lisis {
		border-radius: 10rpx;
		float: right;
		width: 200rpx;
		height: 50rpx;
		text-align: center;
		line-height: 50rpx;
		color: #FFFFFF;
		box-shadow: rgba(25, 94, 215, 0.4) 0px 4px 6px 1px;font-size: 20rpx;
	}
	.list_box {
		width: 93%;
		position: absolute; 
		padding:20rpx; 
		border: 0.5rpx solid rgba(0, 0, 0, 0.1);
		border-top: none; 
		top: 185rpx;
		z-index: 999;
		background-color: #ffffff;
		box-shadow: 5px 5px 5px rgba(215, 215, 215, 0.349019607843137);
	}
	.tishiTxt {
		font-size: 24rpx;
		color: #ddd;
		display: flex;
		flex: 1;
		justify-content: center;
		align-items: center;
	}
	.more {
		background-color: #477EDA;
		line-height: 55rpx;
	}
	.box_body {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		border-bottom: 1rpx solid rgba(221, 221, 221, 0.8);
		line-height: 60rpx;
	}
	.txt_layout {
		display: flex;
		flex: 1;
		justify-content: center;
		align-items: center;
	}
	.boxsss {
		width: calc(100% - 40rpx);
		height: 100%;
		display: block;
		position: fixed;
		top: 0rpx;
		left: 0rpx;
		background-color: rgba(102, 102, 102, 0.498039215686275);
		display: flex;
		justify-content: center;
		align-items: center;
		padding: 0 20rpx;
		z-index: 99;
	}
	.modal_boxs {
		width: 600rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		background-color: rgba(252, 252, 252, 1);
		border-radius: 10rpx;
		padding-bottom: 20rpx;
		position: relative;
	}
	.box_head {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		border-bottom: 1rpx solid rgba(221, 221, 221, 0.8);
		line-height: 60rpx;
	}
	
	.lisi_top {
		padding: 40rpx 20rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.in_boxs {
		border-radius: 16rpx 16rpx 0px 0px;
		padding: 30rpx 50rpx;
		display: flex;
		flex: 1;
		flex-direction: column;
		background-color: #FFFFFF;
	}
	.list_b {
		margin-bottom: 30rpx;
	}
	.account-txt {
		font-size: 28rpx;
		font-family: "PingFangSC-Medium, PingFang SC";
		font-weight: 500;
		color: #ADADAD;
	}
	.input_box {
		/* border: 1px solid red; */
		width: 100%;
		position: relative;
	}
	.toPay {
		background-color: rgba(58, 122, 199, 1);
		border-radius: 10rpx;
		font-size: 24rpx;
		padding: 0 20rpx;
		color: #FFFFFF;
		display: inline;
		line-height: 40rpx;
	}
	.less_txt {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 100%;
		padding: 30rpx 0;
	}
	.orgTxt {
		font-size: 28rpx;
		font-family: "PingFangSC-Medium, PingFang SC";
		font-weight: 500;
		color: #6B707A;
		margin-right: 14rpx;
		width: 100rpx;
		text-align: justify;
		height: 40rpx;
	}
	.quexiao {
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		margin-top: 20rpx;
	}
	.in_box {
		display: flex;
		flex-direction: row;
		align-items: center;
		padding: 0 20rpx;
		height: 84rpx;
		margin-bottom: 20rpx;
		background: #FFFFFF;
		border-radius: 8rpx;
		border: 1px solid #E6E6E6;
	}
	.in_box:last-child {
		margin: 0;
	}
	.uni-input {
		padding: 0;
	}
	.selectBox {
		display: flex;
		/* flex: 1; */
		justify-content: center;
		align-items: center;
	}
	.selectBox:last-child {
		margin-right: 0;
	}
	.orgTxt text {
		display: inline-block;
		width:100%;
		height: 0;
	}
	.selectTxt {
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		font-size: 28rpx;
		font-family: "PingFangSC-Medium, PingFang SC";
		font-weight: 500;
		color: #6B707A;
		// margin-right: 14rpx;
	}
	.down_icon{
		width: 48rpx;
		height: 48rpx;
	}
</style>
